<template>
  <div id="chen">
    <div class="box">
      <div class="top">
        <span class="top-t" v-html="'取票号&nbsp;&nbsp;'+msg"></span>
      </div>
      <div class="address">
        <div class="address-left">
          <ul>
            <li>{{address[0].station}}</li>
            <li><span class="font-size0">{{address[0].clock}}</span></li>
            <li>{{address[0].time}}</li>
          </ul>
        </div>
        <div class="address-mid">
          <div class="car">G1812</div>
          <div class="bar">
            <span class="span-t" @click="method">时刻表</span>
          </div>
        </div>
        <div class="address-right">
          <ul>
            <li>{{address[1].station}}</li>
            <li><span class="font-size0">{{address[1].clock}}</span></li>
            <li>{{address[1].time}}</li>
          </ul>
        </div>
      </div>
      <div class="details">
      </div>
      <div class="clicks"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'chen',
  data () {
    return {
      msg: 'E385040019',
      address: [
        {
          station: '郑州东',
          time: '2018-10-01',
          clock: '09:03'
        },
        {
          station: '商丘',
          time: '2018-10-01',
          clock: '09:53'
        }
      ],
      method: function () {
        // GET
        this.$ajax({
          method: 'get',
          // url:'../static/test/getInfo.json', //<---本地地址
          url: '/api/drummer/8bd17859'
        }).then(response => {
          let _data = response.data
          alert('hello,' + _data.username)
        }).catch(function (err) {
          console.log(err)
        })
      }
      // mounted () {
      //
      //   //GET
      //   this.$ajax({
      //     method: 'get',
      //     // url:'../static/test/getInfo.json', //<---本地地址
      //     url: '/api/drummer/8bd17859',
      //   }).then(response => {
      //     let _data = response.data
      //     alert('hello,' + _data.username)
      //   }).catch(function (err) {
      //     console.log(err)
      //   })
      //
      //   //POST
      //   this.$ajax({
      //     method: 'post',
      //     url: '/api/drummer',
      //     data: {
      //       code: '1234567',
      //       username: 'Joyce'
      //     }
      //   }).then(response => {
      //     alert('post code done')
      //   }).catch(function (err) {
      //     console.log(err)
      //   })
      // }
    }
  }
}
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .box {
    width: 360px;
    height: 800px;
    background: #CCC;
    margin: 0 auto;
    border: 1px solid #CCC;
  }

  .top {
    width: inherit;
    height: 35px;
    background: #f5f5f5;
    border-bottom: transparent;
  }

  .top-t {
    font-size: 12px;
    font-family: 微软雅黑;
    margin-left: 20px;
    line-height: 35px;
  }

  .address {
    width: inherit;
    height: 100px;
    background: #00bcd4;
  }

  .address-left {
    width: 120px;
    height: inherit;
    float: left;
  }

  .address-right {
    width: 120px;
    height: inherit;
    float: right;
  }

  .address-left ul, .address-right ul {
    width: inherit;
    height: 50px;
    padding-top: 10px;
  }

  .address ul > li {
    font-family: 微软雅黑;
    font-size: 14px;
    list-style-type: none;
    color: #FFF;
    padding: 2px 20px;
  }

  .address-right ul > li {
    text-align: right;
  }

  .font-size0 {
    font-size: 20px;
  }

  .address-mid {
    width: 120px;
    height: inherit;
    float: left;
  }

  .car {
    width: inherit;
    height: 20px;
    text-align: center;
    margin: 10px auto 5px auto;
    color: #FFF;
  }

  .bar {
    width: 80px;
    height: 25px;
    border: 1px solid #FFF;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    outline: none;
  }

  .span-t {
    width: inherit;
    height: 25px;
    color: #FFF;
    line-height: 25px;
    padding-left: 15px;
  }

  .details {
    width: inherit;
    height: 100px;
    background: #FFF;
  }

  .clicks {
    width: inherit;
    height: 40px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background: #FFF;
  }
</style>
